<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>预警策略</title>
		<link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style>
			.w18 {
				width: 160px;
				padding-right: 20px;
			}
			.w10{width: 100px;
				padding-right: 20px;}
	 .w100 {
				width: 100px;
				padding-left: 20px;
			}
			.w70{width:80px;text-align: right;}
			#peopleForm i.icon.icon_edit {
				height: 40px;
			}
			
			
			#peopleForm .icon.icon_delete {
				height: 40px;
			}
			
			#peopleForm .hover i.icon.icon_edit {
				background-position: -79px -7px;
			}
			
			#peopleForm .hover:hover i.icon.icon_edit {
				background-position: -539px 13px;
			}
			
			#peopleForm .hover i.icon.icon_delete {
				background-position: -79px -48.5px;
			}
			
			#peopleForm .hover:hover i.icon.icon_delete {
				background-position: -538px -28.5px;
			}
		</style>

	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/warningMenu.js" type="text/javascript" charset="utf-8"></script>
			<div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem">
							<a href="#">预警事件</a>
						</li>
						<li class="tabItem  active">
							<a href="#">预警策略</a>
						</li>
						<li class="tabItem ">
							<a href="#">预警人员</a>
						</li>
						<li class="tabItem ">
							<a href="#">预警日志</a>
						</li>
					</ul>
				</div>

				<div class="page-container">
					<div class="page-form">
						<div>
							<span class="btn disabled fl group groupStart">批量启用</span>
							<span class="btn disabled fl group groupStop" style="margin-left:20px;">批量停用</span>
							<span class="btn blue addPro  fr" onclick="add()"><i class="icon icon_add blue"></i> 添加策略</span>
						</div>
						<div class="clearfix"></div>
						<div class="form">
							<form class="multiinline-form">
								<section>
									<div>
										<label>事件名称：</label>
										<div class="overlay">
											<!--这个是用来存放选中的select的值的-->
											<input type="hidden" value="" class="form-select-value" name="eventname" />
											<div class="dropdown">
												<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value" data-default="全部" >全部</span>
				                                <span class="caret"></span>
				                            </button>
												<ul class="none">
													<li data-value=''>全部</li>
													<li data-value='1'>红包预警</li>
													<li data-value='2'>库存不足</li>
												</ul>
											</div>
										</div>
									</div>
									<div>
										<label>策略状态：</label>
										<div class="overlay">
											<!--这个是用来存放选中的select的值的-->
											<input type="hidden" value="" class="form-select-value" name="status" />
											<div class="dropdown">
												<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value" data-default="全部" >全部</span>
				                                <span class="caret"></span>
				                            </button>
												<ul class="none">
													<li data-value=''>全部</li>
													<li data-value='1'>启用</li>
													<li data-value='2'>停用</li>
												</ul>
											</div>
										</div>
									</div>
								</section>
								<div class="clearfix"></div>
								<section style="margin-top:14px;">
									<div>
										<label>所属企业：</label>
										<div class="overlay">
											<!--这个是用来存放选中的select的值的-->
											<input type="hidden" value="" class="form-select-value" name="company" />
											<div class="dropdown">
												<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value" data-default="全部" >全部</span>
				                                <span class="caret"></span>
				                            </button>
												<ul class="none">
													<li data-value=''>全部</li>
													<li data-value='1'>酒气</li>
													<li data-value='2'>平台</li>
													<li data-value='3'>瓶盖厂</li>
												</ul>
											</div>
										</div>
									</div>
									<div>
										<label>策略类型：</label>
										<div class="overlay">
											<!--这个是用来存放选中的select的值的-->
											<input type="hidden" value="" class="form-select-value" name="type" />
											<div class="dropdown">
												<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value" data-default="全部" >全部</span>
				                                <span class="caret"></span>
				                            </button>
												<ul class="none">
													<li data-value=''>全部</li>
													<li data-value='1'>累计100次</li>
													<li data-value='2'>累计100次</li>
												</ul>
											</div>
										</div>
									</div>
									<input type="hidden" id="pageNo" value="1" />
									<input type="button" value="搜索" class="search-input-button" onclick="searchForm()" />
									<input type="button" value="重置" onclick="resetForm()" class="search-input-button bgblue" style="margin-right: 0px;" />

								</section>
							</form>
						</div>
					</div>
					<div class="table">
						<div class="tablelist">
							<table>
								<thead>
									<tr>
										<th class="colspan" style="width:80px;">
											<div class="checkbox inline-block">
												<input type="checkbox" value="" class="label-input" id="checkAll" />
												<label for="checkAll" class="input-label"></label>
											</div>
											全选
										</th>
										<th class="w18">事件名称</th>
										<th class="w18">策略类型</th>
										<th class="w18">所属企业</th>
										<th class="w18">预警方式</th>
										<th class="w18">操作</th>
									</tr>
								</thead>
								<tbody id="itemContainer">

								</tbody>
							</table>
						</div>

						<div class="pagelist fr">
							<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
							<div class="pagination inline-block fl"></div>
							<div class="inline-block fl">
								到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
							</div>

						</div>

					</div>

				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

		<!--这里是删除产品的弹框（无法删除）-->

	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/wdatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>

	<script>
		var checkedLen, id;
		var params = {
			'eventname': '',
			'status': '',
			'company': '',
			'type': '',
		};
		listInit.url = "json/warningEventList.json";
		listInit.pageParams.perPage = 2;
		listInit.pageParams.totalNumber = 10;
		listInit.pageInit();
		listInit.pageCallback = formData;
		listInit.ajaxgGetDataHtml(params, listInit.pageCallback);
		
		$(function() {
			ccfun();
			 
		})
//异步获取要编辑的对象
function ajaxGetEditObj(id){
	return {
		'id':1,
		"eventName":'1',
		"company":'1',
		"waytype":'1',
		 "waystaus":'1',
		"ways":[1,2],
		"hour":12,
	};
}
//根据所属企业来获取预警人员
function ajaxGetPeoply(companyId){
	if(companyId==1){
		return [{
				"id":11,
				"job":"erew",
				"name":"李建",
				"tel":"17589568956"
			},{
				"id":12,
				"job":"rewr市场",
				"name":"李rwe艳",
				"tel":"17589568956"
			},{
				"id":13,
				"job":"rew",
				"name":"李re艳",
				"tel":"17589568956"
	}];
	}else{
		return [{
				"id":11,
				"job":"KAIF",
				"name":"李建",
				"tel":"17589568956"
			},{
				"id":12,
				"job":"市场",
				"name":"李艳",
				"tel":"17589568956"
			},{
				"id":13,
				"job":"市场",
				"name":"李艳",
				"tel":"17589568956"
	}];
	}
	
}

//添加预警策略
function ajaxAdded(){
	
}
		function add() {
			operateEvent();
		}

		function edit(id) {
			var editObj=ajaxGetEditObj(id);
			operateEvent(editObj);
		}
       
        
		//生成添加或者删除预警策略的html
		function operateEvent(aa) {
			var editObj = aa ? aa : '';		
			var html = '<div class="form" style="margin:20px;"><form class="block-form" id="peopleForm">'+
			'<div style="margin-top:0px"><label class="inline-block w70"><span class="red">*</span>选择事件：</label><div class="overlay">  <input type="hidden" value="" class="form-select-value" name="eventSelected" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value" data-default="全部" >全部</span> <span class="caret"></span> </button> <ul class="none"> <li data-value="">全部</li> <li data-value="1">红包账户余额不足</li> <li data-value="2">红包账户余额不足2</li> </ul> </div> </div> </div>'+
			'<div><label class="inline-block w70"><span class="red">*</span>所属企业：</label><div class="overlay">  <input type="hidden" value="" class="form-select-value" name="newcompany" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value" data-default="全部" >全部</span> <span class="caret"></span> </button> <ul class="none"> <li data-value="" onclick="AjaxPeopleHtml();" >全部</li> <li data-value="1" onclick="AjaxPeopleHtml(1)" >企业1</li> <li data-value="2" onclick="AjaxPeopleHtml(2)" >企业2</li> </ul> </div> </div><a target="_blank" href="warningPeople.html" class="colorblue" style="text-decoration: underline;padding-left:21px;">管理预警人员</a></div>';
			html+='<div id="aaway" style="border:1px solid #ddd;width:300px;margin-left: 80px;"> </div>';
			html+='<div><label class="inline-block w70"><span class="red">*</span>策略类型：</label><div class="overlay">  <input type="hidden" value="" class="form-select-value" name="wayType" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value" data-default="全部" >全部</span> <span class="caret"></span> </button> <ul class="none"> <li data-value="">全部</li> <li data-value="1">策略1</li> <li data-value="2">策略2</li> </ul> </div> </div><span style="margin-left:20px;margin-right:8px;">每</span><input type="text" style="width:26px;height:26px;" name="hour" /> 小时 </div>'+
			'<div class=" over-hidden"><label class="inline-block w70 fl"><span class="red">*</span>预警方式：</label>'+
			'<div class="checkbox inline-block fl" data-id="" style="position:relative;z-index:10;margin-left: -16px;"> <input type="checkbox" name="yujingFangshi" value="1" style="width:15px;height: 20px;" class="label-input" id="checkbox_way_1" /> <label for="checkbox_way_1" class="input-label"></label>系统消息</div> '+
			'<div class="checkbox inline-block fl" data-id="" style="position:relative;z-index:10;"> <input type="checkbox" value="2" name="yujingFangshi"  class="label-input" style="width:15px;height: 20px;"  id="checkbox_way_2" /> <label for="checkbox_way_2" class="input-label"></label>短信消息 </div> '+
			'</div>';
			html+='<div><label class="inline-block w70"><span class="red">*</span>策略状态：</label><div class="overlay">  <input type="hidden" value="" class="form-select-value" name="wayStatus" /> <div class="dropdown"> <button class="dropdown-toggle form-dropdown" type="button"> <span class="value" data-default="全部" >全部</span> <span class="caret"></span> </button> <ul class="none"> <li data-value="">全部</li> <li data-value="1">启用</li> <li data-value="2">停用</li> </ul> </div> </div></div>'+
			'<div style="margin-top:40px;"><label class="inline-block w70 hidden"><span class="red">*</span>策略状态：</label><input type="button" value="保存" class="search-input-button bgblue" id="subButton" /><input type="button" value="取消" class="search-input-button" id="backButton" /></div>'+
			'</form></div>';
			layObj.content(500, 400, '添加事件', html, '', function() {addEvent(editObj, '')});
		}
        //异步调用所属企业的预警人员
        function AjaxPeopleHtml(companyId){
        	var data=ajaxGetPeoply(companyId);
			var h=fromPeopleHtml(data,companyId); 
			$("#aaway").html(h);
        }
        //生成预警人员的html
        function fromPeopleHtml(data,companyId){
        	var peopleHtml='<table style="width:100%">';
        	for(var i=0;i<data.length;i++){
        		var temp=data[i];
        		peopleHtml+='<tr style="line-height: 30px;"><td class="w100"><p class="w100 text-ellipsis">' + temp.job + '</p></td><td class="w100"><p class="w100 text-ellipsis">' + temp.name + '</p></td>' +
					'</tr>';
        	}
        	peopleHtml+='</table>';
        	return peopleHtml;
        }
  
		//添加或者删除预警策略
		function addEvent(editObj,editId) {
			checkBoxFun('', $('#peopleForm input:checkbox'));
			selectObj.showChangeValue();
			var companyId=editObj.companyId?editObj.companyId:'';
			AjaxPeopleHtml(companyId);
			
			var inputeventSelected=$("input[name='eventSelected']");
			var inputnewcompany=$("input[name='newcompany']");
			var inputwayType=$("input[name='wayType']");
			var inputhour=$("input[name='hour']");
			var inputwayStatus=$("input[name='wayStatus']");
			 
			
			if(editObj) {
				for(var i = 0; i < editObj.ways.length; i++) {
					var temp = editObj.ways[i];
					$('#checkbox_way_' + temp)[0].checked = true;
					$('#checkbox_way_' + temp).parent().addClass("checked_checkbox");
				}
				$(inputeventSelected).val(editObj.eventName);
				$(inputeventSelected).next().find('li').each(function(){
					if($(this).attr('data-value')==editObj.eventName){
						$(inputeventSelected).next().find('.value').html($(this).html());
					}
				});
				
				
				$(inputnewcompany).val(editObj.company);
				$(inputnewcompany).next().find('li').each(function(){
					if($(this).attr('data-value')==editObj.eventName){
						$(inputnewcompany).next().find('.value').html($(this).html());
					}
				});
				
				$(inputwayType).val(editObj.waytype);
				$(inputwayType).next().find('li').each(function(){
					if($(this).attr('data-value')==editObj.eventName){
						$(inputwayType).next().find('.value').html($(this).html());
					}
				});
				
				$(inputwayStatus).val(editObj.waystaus);
				$(inputwayStatus).next().find('li').each(function(){
					if($(this).attr('data-value')==editObj.eventName){
						$(inputwayStatus).next().find('.value').html($(this).html());
					}
				});
				
			    $(inputhour).val(editObj.hour);
			}

			$("#subButton").click(function() {
				var loading = layer.load(0, { 'shade': [0.5, '#fff'] });
				
				var eventSelected = $(inputeventSelected).val();
				var company = $(inputnewcompany).val();
				var wayType = $(inputwayType).val();
				var hour = $(inputhour).val();
				var yujingFangshi=[];
				$("input[name='yujingFangshi']:checked").each(function(){
					yujingFangshi.push($(this).val());
				}) 
				var wayStatus = $(inputwayStatus).val();
				
				var errorcount = 0;
				$('.error').remove();
				if(!eventSelected) {
					errorcount++;
					$(inputeventSelected).parent().after('<div style="margin-left: 61px;" class="error"><i class=\" icon icon_error_red \"></i>请选择事件</div>');
				}
				if(!company) {
					errorcount++;
					console.log('company');
					$(inputnewcompany).parent().next().after('<div style="margin-left: 61px;" class="error"><i class=\" icon icon_error_red \"></i>请选择所属企业</div>');
				}
				var re = /^[0-9]+[0-9]*[0-9]*$/ ;
				if(!wayType || !hour) {
					errorcount++;
					$(inputhour).parent().after('<div style="margin-left: 61px;margin-top:0px;" class="error"><i class=\" icon icon_error_red \"></i>策略类型不能为空</div>');
				}else if(!re.test(hour)){
					errorcount++;
           			$(inputhour).parent().after('<div style="margin-left: 61px;margin-top:0px;" class="error"><i class=\" icon icon_error_red \"></i>请填写正确的小时数字</div>');
				}
				
				if(yujingFangshi.length == 0) {
					errorcount++;
					$("input[name='yujingFangshi']").eq(0).parent().parent().after('<div style="margin-left: 61px;margin-top:0px;" class="error"><i class=\" icon icon_error_red \"></i>请选择预警方式</div>');
				}
				
				if(!wayStatus) {
					errorcount++;
					$(inputwayStatus).parent().after('<div style="margin-left: 61px;margin-top:0px;" class="error"><i class=\" icon icon_error_red \"></i>策略类型不能为空</div>');
				}
				
				if(errorcount > 0) {
					layer.close(loading);
					return false;
				}
 
 				if(editObj){
 					params.id=editObj.id;
 				}else{
 					params.id=ajaxAdded();
 				}
				var params={
					
				}
				
				//这里还需要判断是添加还是删除
				/*$.ajax({
					url: url,
					dataType: "JSON",
					type: "GET",
					data: params,
					cache: false,
					success: function(data) {
						 layer.close(loading);
						 layer.closeAll();
					},
					error: function() {
						layer.close(loading);layer.msg('添加失败，请稍后再试！');
					}
				})*/
				window.location.reload();
			})
			$("#backButton").click(function() {
				layer.closeAll();
			})
		}
 
		function searchForm() {
			params.eventname = $('input[name=eventname]').val();
			params.status = $('input[name=status]').val();
			params.starttime = $('input[name=starttime]').val();
			params.endtime = $('input[name=endtime]').val();
			listInit.searchForm(params);
		}
		//复选框事件
		function ccfun() {
			listInit.checkinit();
			//点击checkbox之后显示批量按钮
			$('.tablelist input:checkbox').click(function() {
				checkedLen = $('.checkbox.checked_checkbox').length;
				if(checkedLen > 0) {
					$('.group').removeClass('disabled');
					bindclickFun();
				} else {
					$('.group').addClass('disabled');
					unbindFun();
				}
			})
		}

		function start(obj, id,msg) {
			var yesFun = {
				msg: '确定',
				callback: function(layeo, index) {
					startAstopFun(1, id);
					$(obj).replaceWith('<span class="stopuse hover" onclick="stop(this,' + id + ',\''+msg+'\')"><i class="icon icon_stopuse blue"></i> <span>停用</span></span>');
				}
			};
			var noFun = {
				msg: '取消',
				callback: function(layeo, index) {
					layer.close(index);
				}
			};
			layObj.confirm('确定启用事件\"'+msg+'\"?', '启用事件', 400, 180, 'confirmclass', yesFun, noFun)
		}

		function stop(obj, id,msg) {
			var yesFun = {
				msg: '确定',
				callback: function(layeo, index) {
					startAstopFun(-1, id);
					$(obj).replaceWith('<span class="stopuse hover" onclick="start(this,' + id + ',\''+msg+'\')"><i class="icon icon_stratuse blue"></i> <span>启用</span></span>');
				}
			};
			var noFun = {
				msg: '取消',
				callback: function(layeo, index) {
					layer.close(index);
				}
			};
			layObj.confirm('确定停用\"'+msg+'\"?', '停用事件', 400, 180, 'confirmclass', yesFun, noFun)

		}

		function checkfunction(flag) {
			var aamsg = flag == 1 ? '确定批量启用事件么' : '确定批量停用事件么';
			if(checkedLen > 0) {
				var yesFun = {
					msg: '确定',
					callback: function(layeo, index) {
						var ids = []; //这里是获取批量操作的id数组
						$('#itemContainer .checkbox.checked_checkbox').each(function() {
							ids.push($(this).attr('data-id'));
						})
						console.log(ids);
						$('.tablelist input:checkbox').each(function() {
							$(this)[0].checked = false;
						});
						$('.checkbox').removeClass("checked_checkbox");
						unbindFun();
						$('.group').addClass('disabled');

						for(var i = 0; i < ids.length; i++) {
							startAstopFun(flag, ids[i]);
						}
						window.location.reload();
					}
				};
				var noFun = {
					msg: '取消',
					callback: function(layeo, index) {
						layer.close(index);
					}
				};
				layObj.confirm(aamsg, '提示', 400, 180, 'confirmclass', yesFun, noFun)
			}
		}

		function startAstopFun(flag, id) {
			/*$.ajax({
				url: '',
				dataType: "JSON",
				type: "GET",
				data: {},
				cache: false,
				success: function(data) {
					if(flag==1){
						alert('qiyong');
					}else{
						alert('tingyong');
					}
				},
				error: function() {
					layer.msg('请稍后再试');
				}
			})*/
		}

		function bindclickFun() {
			$('.groupStart').bind('click', function() {
				checkfunction(1)
			});
			$('.groupStop').bind('click', function() {
				checkfunction(-1)
			});
		}
		function unbindFun() {
			$('.groupStart').unbind('click');
			$('.groupStop').unbind('click');
		}

		function formData(data) {
			var html = '';
			for(var i = 0; i < data.length; i++) {
				var temp = data[i];
				html += '<tr> <td class="colspan" style="width:80px;"> <div class="checkbox inline-block" data-id="' + temp.id + '" style="position:relative;z-index:10;"> <input type="checkbox" value="" class="label-input" id="checkbox_' + temp.id + '" /> <label for="checkbox_' + temp.id + '" class="input-label"></label> </div> </td> <td class="w18"> <div class="text-ellipsis w18" > ' + temp.name + ' </div> </td>  <td class="w10"> <div class="text-ellipsis w18" > ' + temp.name + ' </div> </td> <td class="w18"> <div class="text-ellipsis w18" > ' + temp.obj + ' </div> </td> <td class="w18"> ' + temp.time + ' </td> <td> <div class="text-left  inline-block" >';
				if(temp.status == 1) {
					html += '<span class="stopuse hover"  onclick="stop(this,' + temp.id + ',\'' + temp.name + '\')"><i class="icon icon_stopuse blue"></i> <span>停用</span></span>';
				} else {
					html += '<span class="stopuse hover"  onclick="start(this,' + temp.id + ',\'' + temp.name + '\')"><i class="icon icon_startuse blue"></i> <span>启用</span></span>';
				}
				html += '<span class="tabletop hover check" onclick="edit(' + temp.id + ')" style="padding-left:20px;"><i class="icon icon_edit blue"></i> <span>编辑</span></span> </div> </td> </tr>';
			}
			return html;
		}
	</script>

</html>